<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="page-view-size" content="1280*720">
  <link rel="stylesheet" href="styles/base.css">
  <title>国宝部落-活跃值</title>
  <style>
    body {
      position: absolute;
      margin: 0;
      padding: 0;
      width: 1280px;
      height: 720px;
      background: url(images/active-bg.png);
      background-color: transparent;
    }

    #rules-img {
      position: absolute;
      right: 110px;
      top: 190px;
    }

    #main-1-0 {
      position: absolute;
      width: 648px;
      height: 384px;
      left: 57px;
      top: 153px;
    }

    #main-0 {
      position: absolute;
      left: 780px;
      top: 50px;
    }

    #main-0 .item {
      position: absolute;
      height: 42px;
      width: 133px;
      background: url(images/rules-btn-bg.png) left -120px;
      line-height: 42px;
      text-align: center;
      font-size: 20px;
    }

    #main-0 .item.focus {
      background-position: left -180px;
    }

    #main-0-1 {
      left: 153px;
    }

    #main-0-2 {
      left: 306px;
    }

    #main-2-0 {
      position: absolute;
      width: 222px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: url(images/rules-btn-bg.png) left 0;
      font-size: 24px;
      font-weight: bold;
      right: 180px;
      top: 430px;
    }

    #main-2-0.focus {
      background-position: left -60px;
    }

    #main-3 {
      position: absolute;
      width: 1280px;
      height: 720px;
      background: url(images/rules-dialog.png);
      display: none;
    }

    #main-3 .info {
      position: absolute;
      left: 300px;
      top: 251px;
      font-size: 20px;
      color: #74521f;
      font-weight: bold;
    }

    #main-3 .info .color {
      font-size: 24px;
      color: #ff4444;
    }

    #main-container {
      position: absolute;
      top: 300px;
      left: 270px;
    }

    #main-container .item {
      color: #fff;
      font-size: 18px;
      position: absolute;
      width: 190px;
      height: 120px;
      background: url(images/rules-flag.png) -190px -120px;
    }

    #main-container .item.active {
      background-position: -190px 0;
    }

    #main-container .item.current {
      background-position: 0 -120px;
    }

    #main-container .item.current.active {
      background-position: 0 0;
    }

    #main-container .time {
      position: absolute;
      top: 20px;
      right: 30px;
    }

    .show {
      display: block !important;
    }
  </style>
</head>

<body onload="init()" onunload="exit()">
  <img id="rules-img" src="images/rules-img.png" alt="">
  <div id="main-0">
    <div id="main-0-0" class="item">签到</div>
    <div id="main-0-1" class="item">订购送TV币</div>
    <div id="main-0-2" class="item">规则介绍</div>
  </div>
  <div id="main-1-0" class="item-focus"></div>
  <div id="main-2-0">订购送TV币</div>
  <div id="main-3">
    <div class="info"> 连续签到 <span class="color">1</span> 天,活跃值：<span class="color">8767 </span></div>
    <div id="main-container"></div>
  </div>
</body>
<script src="js/jquery.js"></script>
<script src="config/index.js?v=1"></script>
<script src="api/index.js?v=1"></script>
<script src="js/KeyEvent.js?v=12"></script>
<script src="js/event.js?v=12"></script>
<script src="js/utli.js?v=12"></script>
<script src="js/base.js"></script>

<script>
  var area = [{
    id: 'main-0-',
    index: 0
  }, {
    id: 'main-1-',
    index: 0
  }, {
    id: 'main-2-',
    index: 0
  }, {
    id: 'main-3-'
  }];
  var showDialog = false; // 弹出层状态
  var current = 3; // 当前第几天


  // 页面初始化
  function init() {
    getPreFocus();
    onFocus();
    renderDialog();
  }

  function toggleDialog() {
    freeFocus();
    if (showDialog) {
      $('#main-3').addClass('show');
      focusArea = 3;
    } else {
      $('#main-3').removeClass('show');
      focusArea = 0;
      area[focusArea].index = 0;
    }
    onFocus();
  }

  // 获取url参数
  function getPreFocus() {
    var url = window.location.href;
    focusArea = parseInt(GY.getURLParameter("AREA", url) != "" ? GY.getURLParameter(
      "AREA", url) : 0);
    area[focusArea].index = parseInt(GY.getURLParameter("INDEX", url) != "" ? GY.getURLParameter(
      "INDEX", url) : 0);
  }

  // 加载弹出层内容
  function renderDialog() {
    var html = ''
    for (var i = 0; i < 7; i++) {
      var className = ''
      var style = 'left:' + 190 * (i % 4) + 'px;top:' + Math.floor(i / 4) * 130 + 'px;'
      if (i < current) {
        className = 'active'
      } else if (i == current) {
        className = 'current'
      }
      html += '<div id="main-3-' + i + '" class="item ' + className + '" style="' + style + '"><div class="time">第' + (
          i + 1) +
        '天</div></div>'
    }
    $('#main-container').html(html);
  }

  // 上键操作
  function keyUp() {
    var index = area[focusArea].index;
    freeFocus();
    switch (focusArea) {
      case 1:
        focusArea = 0;
        area[focusArea].index = 0;
        break;
      case 2:
        focusArea = 0;
        area[focusArea].index = 1;
        break;
    }
    onFocus()
  }

  // 下键操作
  function keyDown() {
    var index = area[focusArea].index;
    freeFocus();
    switch (focusArea) {
      case 0:
        if (index > 0) {
          focusArea = 2;

        } else {
          focusArea = 1;
        }
        break;
    }
    onFocus()
  }

  // 左键操作
  function keyLeft() {
    var index = area[focusArea].index;
    freeFocus();
    switch (focusArea) {
      case 0:
        if (index > 0) {
          area[focusArea].index--;
        }
        break;
      case 2:
        focusArea = 1;
        break;
    }
    onFocus()
  }

  // 右键操作
  function keyRight() {
    var index = area[focusArea].index;
    freeFocus();
    switch (focusArea) {
      case 0:
        index++;
        if ($('#' + area[focusArea].id + index).length > 0) {
          area[focusArea].index++;
        }
        break;
      case 1:
        focusArea = 2;
        break;
    }
    onFocus()
  }

  // 回车键操作
  function keyEnter() {
    var index = area[focusArea].index;
    var form = PANDA_PATH + "active.html?AREA=" + focusArea + "&INDEX=" + area[focusArea].index;
    switch (focusArea) {
      case 0:
        if (index == 0) {
          showDialog = true;
          toggleDialog();
        } else if (index == 2) {
          isNeed = 1;
          //window.location.href = PANDA_PATH + 'rules.html'
          GY.addUrl(PANDA_PATH + 'rules.html', form);
        }
        break;
      case 3:
        if (!$('#main-3-' + current).hasClass('active')) {
          $('#main-3-' + current).addClass('active');
        }
        break;
    }
  }

  // 返回键操作
  function keyBack() {
    if (focusArea == 3) {
      showDialog = false;
      toggleDialog();
    } else {
      isNeed = 0;
      GY.goback();
    }
  }

  // 页面退出
  function exit() {

    // 
  }

  // 落焦
  function onFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.addClass('focus');
  }

  // 失焦 
  function freeFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.removeClass('focus');
  }
</script>

</html>